<template>
	<view class="container">
		<view class="status_bar">

		</view>
		<view class="navigation">
			<view class="back" @click="goBack">
				<i class="icon-left iconfont left"></i>
			</view>

			<uni-search-bar v-model="name" radius="20" class="search" placeholder="Intro...宋冬野" bgColor="#EEEEEE"
				clearButton="auto" cancelButton="none" :focus="true" :input-style="{ 'pointer-events': 'none' }" />
			<view class="searchButton" @click="search">
				搜索
			</view>
		</view>
		<!-- <view class="typeList">
			<view :class="`button ${nameAcive}`" @click="changeType(1)" >作品</view>
			<view :class="`button ${authorAcive}`" @click="changeType(2)">歌手</view>
		</view> -->

		<view class="opera" v-if="searchMusicList.length">
			<view class="title">
				单曲
			</view>
			<view class="play" @click="playSL">
				<i class="icon-start iconfont"></i> 播放
			</view>
		</view>
		<view class="empty" v-else>
			<i class="icon-meiyoushuju iconfont nodata" v-if="searched" />
			
			<view v-if="searched">暂时未录入相关歌曲</view>
			<image src="../../static/search2.png" mode="aspectFit" v-if="!searched" class="uImage"></image>
			<view v-if="!searched">请搜索。。。</view>
		</view>
		<scroll-view class="sMusicList" :scroll-y="true" :show-scrollbar="false">
			<view class="MusicItem" v-for="(item,index) of searchMusicList" :key="index">
				<view class="info">
					<view class="name">
						{{item.name}}
					</view>
					<view class="author">
						<view class="tip">
							singer
						</view>
						{{item.author}}
					</view>
				</view>
				<view class="play" @click="addItem">
					
						<i class="icon-add iconfont addIcon"></i>
					
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from "vue"
	import {
		getMusicApi
	} from "@/api/music.js"
	import {musicList,index} from '@/store/music.js'
	let name = ref("")
	let isName = ref(true)
	let nameAcive = computed(() => {
		return isName.value ? 'active' : ''
	})
	let authorAcive = computed(() => {
		return isName.value ? '' : 'active'
	})
	let searchMusicList = ref([])
	let searched=ref(false)
	// let emptyTitle=ref('请搜索...')
	const goBack = () => {
		uni.navigateBack()
	}
	const search = () => {
		
		let obj = isName.value ? {
			name: name.value
		} : {
			author: name.value
		}
		getMusicApi(obj).then(res => {
			// console.log(res)
			searchMusicList.value = res.data.data.data
			searched.value=true
		})
	}
	const playSL=()=>{
		if(searchMusicList.value.length){
			musicList.value=searchMusicList.value
			index.value=0
		}else{
			uni.showToast({
				title: '没东西啊',
				duration: 2000
			});
		}
		
	}
	const changeType = (val) => {
		if (val == 1) {
			isName.value = true
		} else {
			isName.value = false
		}
	}
	const addItem=()=>{
		
	}
</script>

<style lang="scss" scoped>
	.navigation {
		height: 100rpx;
		display: flex;

		.back {
			display: flex;
			justify-content: right;
			align-items: center;

			height: 100%;
			width: 10%;

			.left {
				font-size: 60rpx !important;
			}

		}

		.search {
			width: 80%;
			// border-radius: 20px;


		}

		.searchButton {
			width: 15%;
			display: flex;
			justify-content: left;
			align-items: center;
		}
	}

	.typeList {
		// 	display: flex;
		// justify-content: left;
		margin-top: 10rpx;
		margin-left: 40rpx;

		.button {
			display: inline-block;
			margin: 0 20rpx;
			padding: 0;

			font-size: 30rpx;


		}

		.active {
			border-bottom: 2px solid red;
			color: red;
		}
	}

	.opera {
		height: 60rpx;
		// font-size: 40rpx;
		// padding:30rpx;
		// background-color: #F8F9FD;
		display: flex;
		justify-content: space-between;
		padding-left: 25rpx;
		padding-right: 25rpx;
		padding-top: 20rpx;

		.title {
			font-size: 40rpx;
		}

		.play {
			background-color: #EEEEEE;
			border-radius: 20rpx;
			font-size: 25rpx;
			padding: 10rpx;
			height: 30rpx;

			.icon-start {
				font-size: 25rpx;
				display: inline-block
			}
		}
	}

	.empty {
		height: 40vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color:#808080 ;

		.nodata {
			font-size: 180rpx !important;
			color: green;
			padding-bottom: 10rpx;
		}
		.uImage{
			width: 40vw;
			height: 40vw;
		}
	}

	.sMusicList {
		height: calc(100vh - 100rpx - 90rpx - var(--status-bar-height));
		overflow-y: auto;
		/* 横向滚动 */
		-webkit-overflow-scrolling: touch;

		/* iOS滚动流畅性 */
		// background-color: #F8F9FD;
		.MusicItem {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			padding: 20rpx 20rpx;
			border-bottom: 1px solid rgba(128, 128, 128, 0.2);
			cursor: pointer;


			.info {
				font-size: 35rpx;

				.name {
					width: 60vw;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 使用省略号代替溢出部分 */
					white-space: nowrap;
				}

				.author {
					font-size: 25rpx;
					padding-top: 10rpx;
					color: gray;
					display: flex;
					justify-content: left;
					align-items: center;
					.tip{
						color: white;
						background-color: red;
						display: inline-block;
						font-size: 20rpx;
						padding: 2rpx;
						border-radius: 10rpx;
						margin-right: 5rpx;
					}
				}
			}

			.play {
				// .addButton{
					
				// }
				
				padding-right: 20rpx;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				.addIcon{
					font-size: 40rpx !important;
					color: #00B26A;
				}
			}
		}
	}
</style>